<template>
    <div>
        <el-tooltip placement="left" content="检测在线状态">
            <div v-show="!statusLoading">
                <image class="isonline-img" @click.stop="isCheckStatus"
                    v-if="currentRow.isOnline == 1"
                    src="/static/images/online.png"
                    mode="widthFix"
                />
                <image class="isonline-img" v-else @click.stop="isCheckStatus" src="/static/images/offline.png" mode="widthFix" />
            </div>
            <uni-icons v-show="statusLoading" type="spinner-cycle" size="24" color="#666"></uni-icons>
        </el-tooltip>
    </div>
</template>

<script>
import { equipment } from "@/api/my.js";
export default {
    props: {
        currentRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            statusLoading: false,
        };
    },
    watch: {
        currentRow: {
            handler(val) {
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        isCheckStatus() {
            this.statusLoading = true;
            equipment(`/detect/offline/${this.currentRow.id}`, "post")
                .then((res) => {
                    if (res.data == true) {
                        this.$Toast.none("在线状态已更新！");
                        this.$emit("updateStatus");
                    } else if (res.data == false) {
                        this.$Toast.none("状态一致，无需更新！");
                    }
                })
                .finally(() => (this.statusLoading = false));
        },
    },
};
</script>

<style lang="scss" scoped>
.isonline-img {
    width: 40rpx;
    margin-left: 10rpx;
	position: relative;
	top: 6rpx;
}
.uniui-spinner-cycle {
    margin-left: 10rpx;
}
</style>
